<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <button type="" @click="getMySelectValue">get</button>s -->
        <!-- 组件上的v-model -->
        <!-- 第一步：在子组件上v-model并且绑定对应变量 -->
        <my-select v-model="parentValue" rel="sel"></my-select>
        <input type="" v-model="parentValue" name="" id="">
        <h1>父组件的v-model{{parentValue}}</h1>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //子组件向父组件传递参数
        let myApp = new Vue({
            el:'#app',
            data:{
                parentValue:''
            },
            methods:{
                //getMySelectValue(){
                // 危险方法
                // this.$refs.sel.selValue = '100'
                //拿到对应组件的实例
                // console.log(this.$refs.sel)
                // console.log(this.$refs.selValue)
                // }
            },
            components:{
                mySelect:{
                    props:{
                        //第三步：在子组件中使用value接收父组件传过来的数据
                        //value是内置的props函数，无需重新注册
                        value:{
                            type:String
                        }
                    },
                    template:`
                        <div>
                            <select @change="selectChange($event)" v-model="selValue" name="" id="">
                                <option
                                    v-for="item in options"
                                    :value="item.value">
                                    {{item.label}}
                                </option>
                            </select>
                            <h1>选择器的值是{{selValue}}</h1>
                        </div>
                    `,
                    data(){
                        return {
                            selValue:'',
                            options:[
                                {label:'html',value:'1'},
                                {label:'css',value:'2'},
                                {label:'js',value:'3'},
                                {label:'java',value:'4'},
                                {label:'php',value:'5'},
                                {label:'c#',value:'6'},
                                {label:'c++',value:'7'},
                                {label:'python',value:'8'}
                            ]
                        }
                    },
                    watch:{
                        //第四步
                        //监听value，将value获取的最新的值，赋值给子组件中绑定的变量值
                        value(newValue,oldValue){
                            console.log('newValue',newValue)
                            console.log('oldValue',oldValue)

                            this.selValue = newValue
                        }
                    },
                    methods:{
                        selectChange(event){
                            //event.target
                            console.log(event.target.value)
                            //子组件传出去
                            //第二步：在子组件中吧数据传递出去
                            //vue会启用默认的input事件（内置事件），会自动注册到子组件的事件中
                            this.$emit('input',event.target.value)
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>